<template>
  <div class="login-main">
    <div class="login-content">
      <div class="mengceng">
        <div class="login-center">
          <div class="login-box">

            <div class="tab-box">
              <div class="tab-item" v-for="(item,index) in selectList" :class="item.addClass"
                @click="selectIndex(index)" :key="index">{{item.name}}
              </div>
            </div>

            <div class="input-box">
              <i class="iconfont iconzhanghao"></i>
              <el-input v-model="user" placeholder="手机号" class="main-text"></el-input>
            </div>
            <div class="input-box">
              <i class="iconfont iconmima"></i>
              <el-input v-model="password" placeholder="密码" type="password" class="main-text" @keyup.enter.native="save"></el-input>
            </div>
            <el-checkbox v-model="checked">记住密码</el-checkbox>
            <a href="javascript:;" class="back-password" @click="goB">忘记密码</a>
            <div class="submit" @click="save" v-show="!login">立即登录</div>
            <div class="submit" v-show="login">登陆中...</div>
            <!-- <div class="work">
                        <span class="text">使用合作网站账号登录</span>
                        <div class="work-content">
                            <div class="iconfont iconweixin"></div>
                        </div>
                    </div> -->
          </div>
          <div class="right-box">
            <!-- <p class="content">您还不是{{webSiteSetings.websiteName}}会员？</p>
                    <p class="text">花1分钟时间快速注册</p>
                    <div class="sign" @click="goR">免费注册</div> -->
            <img src="../../static/image/body-bg.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import {
    Notification
  } from 'element-ui';
  export default {
    scrollToTop: true,
    components: {

    },
    data() {
      return {
        selectList: [{
            name: '登陆',
            addClass: 'active'
          },
          {
            name: '注册',
            addClass: ''
          },
        ],
        webSiteSetings: {},
        menuList: [

        ],
        user: '',
        password: '',
        text: '学生登录',
        type: '',
        checked: false,
        login: false,
        audio: {}
      }
    },
    created() {
      this.getData();
      if (Cookies.get("remember") == 'yes') {
        this.user = Cookies.get("mobile");
        this.password = Cookies.get("password");
      }

    },
    mounted() {

    },
    beforeDestroy() {

    },
    head() {
      return {
        title: '登录',

      }
    },
    methods: {
      selectIndex(index) {
        // this.selectActive = index
        // this.selectList.forEach((item, i) => {
        //   if (i == index) {
        //     item.addClass = "active";
        //   } else {
        //     item.addClass = "";
        //   }
        // })
        if (index == 1) {
          this.$router.push('/reg')
        }
      },
      select(index) {
        this.menuList.forEach((item, i) => {
          if (i == index) {
            item.addClass = "active"
          } else {
            item.addClass = ""
          }
        })
      },
      save() {
        let that = this;
        if (this.user == "") {
          Notification.warning({
            title: '提示',
            message: "请输入手机号"
          });
          return;
        } else if (!(/^1[3456789]\d{9}$/.test(this.user))) {
          Notification.warning({
            title: '提示',
            message: "请输入正确的手机号"
          });
          return;
        } else if (this.password == "") {
          Notification.warning({
            title: '提示',
            message: "请输入密码"
          });
          return;
        }
        this.login = true;
        let url = "/f/login";

        this.$axios.$get(url + "?loginName=" + this.user + "&password=" + this.password)
          .then(function(response) {

            let obj = response.data.educationUser;


            Cookies.set("userData", JSON.stringify(obj));
            if (that.checked) {
              Cookies.set("mobile", that.user, {
                expires: 7
              });
              Cookies.set("password", that.password, {
                expires: 7
              });
              Cookies.set("remember", "yes", {
                expires: 7
              });
            }
            Cookies.set("token", response.data.token, {
              expires: 1
            });
            that.login = false;
            //Cookies.set("login","yes",{ expires: 1 });
            that.$router.push("/home");
            //that.$emit("loginOut",true);
            that.$emit("loginAfter");
          })
          .catch(function(error) {
            that.login = false;
            console.log(error);
          })
      },
      getData() {
        let that = this;
        this.$axios.$get("/f/index")
          .then(function(response) {

            that.indexData = response.data;
            that.webSiteSetings = response.data.webSiteSetings;

          })
          .catch(function(error) {
            // handle error
            console.log(error);
          })
      },
      pre() {
        this.$refs.carousel.prev();
      },
      goR() {
        this.$router.push("/reg")
      },
      goB() {
        this.$router.push("/forget")
      },
      play() {
        this.audio.pause();
        this.audio.src = this.musicUrl;
        this.audio.play();
      },
      next() {
        this.$refs.carousel.next();
      },
      change(index) {
        this.musicUrl = this.imgList[index].audio;
      },
    }
  }
</script>

<style lang="less">
  .login-main {
    width: 100%;
    background: #f4f4f4;
    .login-content {
      width: 100%;
      height: 600px;
      // background:url('../../static/image/login-bg1.jpg') no-repeat;
      // background:url('../../static/image/kaoshi11.svg') no-repeat 100% 100%;
      // background:url('../../static/image/body-bg.png') no-repeat;
      // background-size: 500px auto;
      // background-position: 80% 0%;
      // background:url('../../static/image/login_bacww.svg') no-repeat 100% 100%;
      // background: rgba(0,0,0,0.2) url('../../static/image/login-bg1.jpg') no-repeat fixed center;
      // float: left;
      position: relative;

      .mengceng {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        // background: rgba(0,0,0,0.4);
        height: 100%;

        .login-center {
          z-index: 2;
          width: 1250px;
          height: 470px;
          margin: 0 auto;
          margin-top: 65px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          .right-box {
            // float:right;
            // width: calc(100% - 650px);
            padding-top: 60px;
            // color: #0076ca;
            color: #ca0000;

            img {
              width: 500px;
              height: auto;
            }

            .typeText {
              line-height: 40px;
              font-size: 30px;
              // color:#ffffff;
              display: block;
              margin-bottom: 40px;

            }

            .content {
              width: 100%;
              line-height: 50px;
              // color:#ffffff;
              font-size: 36px;
            }

            .text {
              line-height: 30px;
              margin: 20px 0;
              font-size: 16px;
              // color:#ffffff;
            }

            .sign {
              width: 170px;
              height: 50px;
              border-radius: 5px;
              border: 1px solid #0076ca;
              line-height: 48px;
              text-align: center;
              font-size: 16px;
              // color:#ffffff;
              cursor: pointer;
            }
          }

          .login-box {
            width: 420px;
            // height:470px;
            margin-left: 60px;
            float: left;
            background: #ffffff;
            border-radius: 5px;
            padding: 60px 40px;
            box-sizing: border-box;

            .tab-box {
              width: 100%;
              box-sizing: border-box;
              padding: 0 40px;
              margin-bottom: 20px;

              .tab-item {
                width: 50%;
                display: inline-block;
                line-height: 30px;
                text-align: center;
                line-height: 30px;
                font-size: 18px;
                color: #0076ca;
                cursor: pointer;
              }

              .active {
                position: relative;
              }

              .active:after {
                content: "";
                position: absolute;
                left: 20%;
                width: 60%;
                height: 3px;
                border-radius: 3px;
                bottom: -4px;
                background: #0076ca;
              }
            }

            .work {
              width: 100%;
              margin-top: 20px;
              border-top: 1px solid #ededed;
              float: left;
              padding-top: 30px;

              .text {
                line-height: 30px;
                height: 30px;
                width: 100%;
                display: block;
                font-size: 14px;
                color: #cccccc;
              }

              .work-content {
                width: 100%;
                margin-top: 15px;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .iconfont {
                  width: 25px;
                  height: 25px;
                  text-align: center;
                  line-height: 25px;
                  border-radius: 50%;
                  color: #ffffff;
                  font-size: 16px;
                }

                .iconweixin {
                  background: #52c431;
                }
              }
            }

            .submit {
              width: 100%;
              height: 45px;
              border-radius: 5px;
              line-height: 45px;
              text-align: center;
              font-size: 18px;
              color: #ffffff;
              background: #3a7bf3;
              float: left;
              cursor: pointer;
            }

            .el-checkbox {
              width: 50%;
              line-height: 1.5rem;
              margin-top: 10px;
              margin-right: 0;
              float: left;
              margin-bottom: 2.5rem;
              text-align: left;
            }

            .back-password {
              line-height: 1.5rem;
              margin-top: 10px;
              text-decoration: none;
              color: #606266;
              font-size: 14px;
              text-align: right;
              width: 50%;
              display: block;
              float: left;
              margin-bottom: 2.5rem;
            }

            .input-box {
              width: 100%;
              height: 45px;
              box-sizing: border-box;
              border: 1px solid #e2e2e2;
              overflow: hidden;
              border-radius: 5px;
              margin-bottom: 20px;

              .main-text {
                width: calc(100% - 50px);
                height: 43px;
                line-height: 43px;
                float: left;

                .el-input__inner {
                  height: 43px;
                  line-height: 43px;
                  border: 0;
                  padding-left: 0;
                }
              }

              .iconfont {
                display: block;
                width: 50px;
                height: 43px;
                line-height: 43px;
                text-align: center;
                color: #cccccc;
                font-size: 20px;
                float: left;
              }
            }
          }
        }
      }

    }
  }
</style>
